<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.2</title>
    <meta name="csrf-token" content="{{csrf_token()}}">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />

    <link rel="stylesheet" href="{{URL::asset('resources/xadmin/css/font.css')}}">
    <link rel="stylesheet" href="{{URL::asset('resources/xadmin/css/xadmin.css')}}">
    <link rel="stylesheet" href="{{URL::asset('resources/xadmin/lib/layui/css/layui.css')}}">



    {{--    <script src="{{URL::asset('resources/xadmin/lib/layui/layui.js')}}" charset="utf-8"></script>--}}
    <script type="text/javascript" src="{{URL::asset('resources/xadmin/lib/layui/layui.js')}}"></script>

    <script type="text/javascript" src="{{URL::asset('resources/xadmin/js/xadmin.js')}}"></script>
    <script type="text/javascript" src="{{URL::asset('resources/xadmin/js/echarts.min.js')}}"></script>
    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="{{URL::asset('resources/xadmin/js/shine.js')}}"></script>

    <style>
        /* body{ margin:0; height:100%} */
        /* html{ height:100%} 兼容firefox的div高度100% */
        /* #temp_chart{ position:absolute; top:70px; left:20px; width:800px; height:500px;}
        #yb_chart{ left:820px; top:0px;height:100%;width:800px; height:500px;} */
        #temp_chart{position:absolute; top:20px; left:-1%; width:55%; height:500px;}
        #yb_chart{position:absolute;top:20px; left:56%;width:45%; height:500px;}
        /* .one{width:80%; font-size:em(设置自体的大小，em可以让自体根据浏览器不同而更加优与阅读）;}
        .two{width:20%;font-size:em;} */
    </style>
</head>
<body>
<div class="x-nav">
          <span class="layui-breadcrumb">
            <a href="">首页</a>
            <a href="">演示</a>
            <a>
              <cite>导航元素</cite></a>
          </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
</div>


<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">



                    <form class="layui-form layui-col-space5" name='form' id='form'>
                        <div class="layui-inline">
                            <label class="layui-form-label">开始日期</label>
                            <div class="layui-input-inline">
                                <input type="text" name="start" id="start" lay-verify="start" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
                            </div>
                        </div>

                        <div class="layui-inline">
                            <label class="layui-form-label">截止日期</label>
                            <div class="layui-input-inline">
                                <input type="text" name="end" id="end" lay-verify="end" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
                            </div>
                        </div>


                        <div class="layui-inline layui-show-xs-block">
                            <button class="layui-btn"  id="btnSubmit" lay-submit="" lay-filter="search"><i class="layui-icon">&#xe615;</i></button>
                        </div>
                    </form>
                    <iframe id="rfFrame" name="rfFrame" src="about:blank" style="display:none;"></iframe>

                    <div class="layui-fluid">
                        <div class="layui-inline layui-show"id="temp_chart">
                        </div>
                        <div class="layui-inline layui-show"  id="yb_chart"></div>

                    </div>

                    {{--<div class="layui-col-sm12 layui-col-md6">--}}
                        {{--<div class="layui-card">--}}
                            {{--<div class="layui-card-header">最新一周PV/UV量</div>--}}
                            {{--<div class="layui-card-body" style="min-height: 280px;">--}}
                                {{--<div id="main2" class="layui-col-sm12" style="height: 300px;"></div>--}}

                            {{--</div>--}}
                        {{--</div>--}}
                    {{--</div>--}}

                </div>
            </div>
        </div>
    </div>
</div>
</body>


<script>

    layui.use(['form','jquery','element','laydate'], function() {
        var $ = layui.jquery
        element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
        var form = layui.form,
            layer = layui.layer;
        laydate=layui.laydate
        laydate.render({
            elem: '#start'
        });   //刷新时间选择
        laydate.render({
            elem: '#end'
        });

        $("#btnSubmit").click(function(){
            $("#form").attr("target","rfFrame");
        });
        //这是echarts表格
        var myChart = echarts.init(document.getElementById('temp_chart'),'shine');
        // var myChart = echarts.init(document.getElementById('humi_chart'),'dark');
        var ybchart = echarts.init(document.getElementById('yb_chart'),'shine');

        // 基于准备好的dom，初始化echarts实例
        // var Chart = echarts.init(document.getElementById('temp_chart'),'xcity');

        // 指定图表的配置项和数据
        // var option = {
        myChart.setOption({
            title: {
                text: '历史数据'
            },
            // tooltip: {
            //     trigger: 'axis',
            //     axisPointer: {
            //         type: 'cross',
            //         label: {
            //             backgroundColor: '#6a7985'
            //         }
            //     }
            // },
            toolbox: {
                show: true,
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    dataView: {readOnly: false},
                    magicType: {type: ['line', 'bar']},
                    restore: {},
                    saveAsImage: {}
                }
            },
            legend: {
                data: ['地区']
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    data: []
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: {
                    name: '可燃性气体',
                    type: 'line',
                    stack: '温度',
                    areaStyle: {},
                    data: []

                }

        });
        // myChart.setOption(option);
        ybchart.showLoading();

        ybchart.setOption({
            tooltip : {
                // formatter: "{a} <br/>{b} : {c}%"
                formatter: "{a} <br/>{b} : {c}"
            },
            // toolbox: {
            //     show: true,
            //     feature: {
            //         restore: {show: true},
            //         saveAsImage: {show: true}
            //     }
            // },
            toolbox: {
                show: true,
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    dataView: {readOnly: false},
                    // magicType: {type: ['line', 'bar']},
                    restore: {},
                    saveAsImage: {}
                }
            },

            series :
                {
                    name:'易燃气体含量',
                    type:'gauge',
                    min:50,
                    max:1024,
                    // detail : {formatter:'{value}%'}, //仪表盘显示数据
                    // axisLine: { //仪表盘轴线样式
                    //     lineStyle: {
                    //         width: 20
                    //     }
                    // },

                    axisLine: {            // 坐标轴线
                        lineStyle: {       // 属性lineStyle控制线条样式
                            width: 10
                        }
                    },
                    axisTick: {            // 坐标轴小标记
                        length: 15,        // 属性length控制线长
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: 'auto'
                        }
                    },

                    splitLine: { //分割线样式
                        length: 20
                    },
                    // data:[{value: 50, name: '完成率'}]
                    data:[]
                }

        });



        fun();
        function fun()
        {
            $.ajax({
                type:"post",
                url:"{{URL::action('Admin\InfoController@MQ2')}}",
                async:true,
                data:{_token:"{{csrf_token()}}"},
                //这里发送请求的时候可以再追加参数，以限制数据的多少
                // data:{_token:"{{csrf_token()}}",timeee:'222'},
                dataType:'json',
                success:function(res)
                {
                    //  show_echarts(res)
                    insert_echarts(res)
                },
                error:function(errorMsg)
                {
                    //请求失败时执行该函数
                    alert("图表请求数据失败!");

                    myChart.hideLoading();

                    //console.log(errorMsg);
                }

            });
        };

        var presetn_info=setInterval(yb_char_update,1000);

        function yb_char_update(){
            $.ajax({
                type:"post",
                url:"{{URL::action('Admin\InfoController@present_get_MQ2')}}",
                async:true,
                data:{_token:"{{csrf_token()}}"},
                dataType:'json',
                success:function(res)
                {

                    console.log(res.mq2);
                    console.log(res);

                    ybchart.setOption({        //加载数据图表
                        series:{// 根据名字对应到相应的系列
                            //name: '当前温度',
                            data:[
                                { name: '可燃性气体',value: res.mq2},
                            ]
                        }

                    });
                    ybchart.hideLoading();
                },
                error:function(errorMsg)
                {
                    //请求失败时执行该函数
                    // var  Tooltip="图表请求数据失败!\n"+"your device is not working\n"+
                    //     "Please check your device";
                    layer.alert("数据请求失败" + "<br />" +
                        "请检查设备连接" + "<br />" + "然后刷新页面!");

                    clearInterval(presetn_info);
                    //  ybchart.hideLoading();
                    ybchart.showLoading({
                        text: '您的设备未工作',
                        textColor: '#c20f20',
                        fontSize: 100,
                        showSpinner: true,
                        lineWidth: 5
                    });
                    console.log(errorMsg);
                }
            })

        }
        //发异步，把数据提交给php
        form.on('submit(search)',function(data){
            console.log(data);
            console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
            console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            //layer.alert(JSON.stringify(data.field))
            $.ajax({
                url:"{{URL::action('Admin\InfoController@MQ2')}}",
                async: true,
                type:"POST",
                dataType: "json",
                headers : {
                    'X-CSRF-TOKEN' : $("meta[name='csrf-token']").attr('content')
                },
                data:data.field,
                success: function(res){
                    // layer.alert("接受成功")
                    //show_echarts(res)

                    console.log(res)
                    insert_echarts(res)
                },
                error:function(errorMsg)
                {
                    //请求失败时执行该函数
                    alert("图表请求数据失败!");
                    myChart.hideLoading();

                    //console.log(errorMsg);
                }


            })


            //  return false;
        })


        function insert_echarts(res){
            if(res){
                console.log(res)
                var times = [];
                var mq2 = [];

                for (let i in res.times) {           //用这个函数将res对象转换成array数组
                    times.push(res.times[i]); //属性
                    mq2.push(res.mq2[i]);

                }

                console.log(res.times);
                console.log(res.air);
                console.log(res.soil);
                myChart.hideLoading();    //隐藏加载动画
                myChart.setOption({        //加载数据图表
                    xAxis:[
                        {
                            data:times,
                        }
                    ],
                    series:{// 根据名字对应到相应的系列
                                name: '可燃性气体',
                                data:mq2
                    }

                });
                //   console.log(res);
            }
        }


    });

</script>

</html>
